<template>
	<view class="pagse">
		<block v-for="(item,index) in dataList" :key="index">
		  	<tui-collapse :index="index" :current="current" @click="change">
		  		<template v-slot:title>
		  			<tui-list-cell :hover="!item.disabled">{{ index + 1 }}、{{item.name}}</tui-list-cell>
		  		</template>
		  		<template v-slot:content>
		  			<view class="tui-content">{{item.intro}}</view>
		  		</template>
		  	</tui-collapse>
		</block>
	</view>
</template>

<script>
	import colors from "@/mixins/color";
	import tuiCollapse from "@/components/thorui/tui-collapse"
	export default {
		components:{ tuiCollapse },
		data() {
			return {
				id: null,
				current: -1,
				dataList: [{
					name: "个人租机需要哪些资料?",
					intro: "个人租机需要提供以下资料:",
				},
				{
					name: "订单审核需要多长时间?",
					intro: "下单完成后24小时内联系您，请您保持通信通畅!",
				},
				{
					name: "为什么租机审核失败了?",
					intro: "您好，用户租机审核失败，根据风控部门的标准，顾客的信用",
				}]
			};
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			change(e) {
				this.current = this.current == e.index ? -1 : e.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagse{
		height: 100vh;
		overflow: hidden;
		font-size: 28upx;
		padding: 30upx 40upx;
		background-color: #fff;
		/deep/ .tui-header{
			font-size: 30upx;
			line-height: 80upx;
		}
		/deep/ .open{
			font-size: 26upx;
			top: 0 !important;
		}
		/deep/ .tui-collapse-icon{
			font-size: 26upx;
			top: 0 !important;
			margin-top: 0 !important;
		}
	}
	.tui-content {
		padding: 20rpx 30rpx;
		background-color: #fff;
		color: #555;
		font-size: 26rpx;
	}
</style>
